<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-radar-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'radar',
      legendData: []
    }
  },

  computed: {
    option () {
      return {
        title: {
          show: this.showTitle,
          text: this.titleText,
          subtext: this.subtitleText
        },
        color: this.colors,
        legend: {
          show: this.showLegend,
          left: this.legendLeft === '' ? 'auto' : this.legendLeft,
          top: this.legendTop === '' ? 'auto' : this.legendTop,
          right: this.legendRight === '' ? 'auto' : this.legendRight,
          bottom: this.legendBottom === '' ? 'auto' : this.legendBottom,
          itemHeight: parseInt(this.legendHeight),
          itemWidth: parseInt(this.legendWidth),
          icon: this.icon,
          textStyle: {
            color: this.legendColor,
            fontSize: this.legendFontSize,
            padding: [3, 0, 0, 0]
          }
        },
        radar: this.chartType === 'radar' ? {
          shape: this.shape === 'circle' ? 'circle' : 'polygon',
          radius: this.radiusLength,
          startAngle: this.startAngle,
          name: {
            show: this.showName,
            textStyle: {
              color: this.radarNameColor,
              fontSize: this.radarNameFontSize,
              backgroundColor: this.radarNameBgColor,
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          splitArea: {
            areaStyle: {
              color: this.splitAreaColors
            }
          },
          axisLine: {
            lineStyle: {
              color: this.axisLineColor
            }
          },
          splitLine: {
            lineStyle: {
              color: this.splitLineColors
            }
          },
          center: [this.radarX, this.radarY],
          triggerEvent: true,
          indicator: this.indicatorData
        } : null,
        tooltip: {
          trigger: this.triggerType,
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },

        dataset: {
          source: this.data
        },
        series: this.series
      }
    }
  },

  methods: {
    setSeries () {
      let vm = this
      let length = this.data.length
      // let dataLength = parseInt(this.dataLength)
      this.series = []
      // this.legendData = []
      this.indicatorData = []
      let sdata = []
      let hlength = 0
      if (length > 1) {
        hlength = this.data[0].length - 1
      }
      let lineXdata = []
      if (this.lineName) {
        lineXdata = this.lineName.split(',')
      }
      for (let j = 1; j < hlength; j++) {
        // this.legendData.push(this.data[0][j])
        let name = this.data[0][j]
        let hasName = false
        if (lineXdata.length > 0) {
          let ak = lineXdata.findIndex((idm) => {
            return idm === vm.data[0][j]
          })
          if (ak > -1) {
            hasName = true
          }
        }

        let value = []
        for (let i = 1; i < length; i++) {
          value.push(this.data.[i][j])
          if (j === 1) {
            this.indicatorData.push({
              name: this.data[i][0],
              max: this.data[i][hlength]
            })
          }
        }
        sdata.push({
          value: value,
          name: this.data[0][j],
          lineStyle: {
            type: hasName ? 'dotted' : 'solid'
          }
          // tooltip: {
          //   formatter: function (params) {
          //     console.log(params)
          //     let a = params.marker + params.name + params.value[params.encode.indicator_0[0]]
          //     return a
          //   }
          // }
        })
      }

      if (this.areaStyle) {
        this.series.push({
          type: this.chartType,
          symbolSize: this.symbolSize,
          lineStyle: {
            width: this.lineWidth
          },
          areaStyle: {
            opacity: this.areaStyleOpacity
          },
          data: sdata
        })
      } else {
        this.series.push({
          type: this.chartType,
          symbolSize: this.symbolSize,
          lineStyle: {
            width: this.lineWidth
          },
          data: sdata
        })
      }
    }
  },

  watch: {
    symbolSize () {
      this.setSeries()
    },
    lineWidth () {
      this.setSeries()
    },
    innerRadius () {
      this.setSeries()
    },
    outerRadius () {
      this.setSeries()
    },
    lineName () {
      this.setSeries()
    },
    areaStyleOpacity () {
      this.setSeries()
    },
    areaStyle () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
